<template>
    <div class="Gcontent">
        <transition 
        @before-enter='beforeE'
        @enter='enterE'
        @after-enter='afterE'
        @enter-cancelled="enterCancelled">
            <div class="ball" v-show="toggles" ref="ball"></div>
        </transition>
		<div class="mui-content">
			<div class="mui-card">
				<lunbo :lunBoTu='list.lunbotu'></lunbo>
			</div>
			<div class="mui-card">
				<div class="mui-card-header">{{list.title}}</div>
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
                        <div>市场价：<s>￥{{list.price}}</s> &nbsp;&nbsp;  销售价：<b class="red">￥{{list.money}}</b></div>
                        <div>购买数量：
                            <num @parentEvent = "getShoppingNum" :min = "1" :max = "list.num"></num>
                        </div>
                        <div>
                            <button @click="goShoppingCar" type="button" class="mui-btn mui-btn-primary">立即购买</button>
                            <button type="button" class="mui-btn mui-btn-danger" :disabled="noClick" @click="addCar()">加入购物车</button>
                        </div>
					</div>
				</div>
				<!-- <div class="mui-card-footer">页脚</div> -->
			</div>
			
			<div class="mui-card">
				<div class="mui-card-header ">商品参数</div>
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						<p>商品货号：{{list.parameter}}</p>
						<p>库存情况：{{list.num}}</p>
						<p>上架日期：{{list.time|time("yyyy-mm-dd hh-mm-ss")}}</p>
					</div>
				</div>
				<div class="mui-card-footer">
					<mt-button plain type="primary" @click="gointroduce()">图文价绍</mt-button>
					<mt-button plain type="danger" @click="addCar()">加入购物车</mt-button>
				</div>
			</div>
		</div>
    </div>
</template>
<script>
import num from '../numJJ/num.vue'
import lunbo from '../lunbo/lunbo.vue'

export default {
    data(){
        return {
            id : this.$route.params.id,
            list : [],
            toggles : false,
            noClick:false,
            shoppingNum : 1,
            min : 1,
            max : 10
        }
    },
    created(){
        this.getData()
    },
    methods : {
        getData(){
            this.$http.get(this.base_url+'vue/datas/goods/goodS.json','json').then(function(res){
                this.list = res.body.data[this.id]
                this.max = res.body.data[this.id].num
            })
        },
        gointroduce(){
            this.$router.push({path:'/home/introduce/'+this.id})
        },
        beforeE(el){
            el.style.transform = "translate(0,0)"
        },
        enterE(el,done){
            el.offsetWidth
            var that = this
            // window.addEventListener('scroll',function(){
            //     return false
            // })
            var ballPlace = this.$refs.ball.getBoundingClientRect()
            var logoPlace = document.getElementById("log").getBoundingClientRect()
            var tx = logoPlace.left - ballPlace.left
            var ty = logoPlace.top - ballPlace.top 
            el.style.transform = `translate(${tx}px,${ty}px)`
            el.style.transition = "all 0.5s cubic-bezier(.76,-0.36,.11,.77)"
            this.$refs.ball.addEventListener('transitionend' , function() {
                that.noClick = false
            });
            done()
        },
        afterE(){
            this.toggles = !this.toggles
        },
        enterCancelled(){
        },
        addCar(){
            this.noClick = !this.noClick
            this.toggles = !this.toggles
            var car = {
                'id':this.id,
                'num':this.shoppingNum,
                'price':this.list.money,
                'select':true,
                "max":this.list.num
            }
            this.$store.commit("getShoppingNum",car)//commit是触发store里的函数的方法
        },
        getShoppingNum (num){
            this.shoppingNum = num
        },
        goShoppingCar(){
            this.$router.push('/shopcar')
        }
    },
    components : {
        lunbo,
        num
    }
}
</script>
<style scoped>  
    .mui-card-content-inner>div{
        margin: 2.6% 0;
    }
    .red{
        color: red
        
    }
    .mui-content{
        overflow: hidden;
    }
    .Gcontent{
        padding-bottom: 52px
    }
    .mui-card-footer{
        display: block;
    }  
    .mui-card-footer>button{
        width: 100%;
        margin: 2% 0;
    }
    .ball{
        left: 40%;
        top: 57.6%;
        z-index: 12;
        width: 16px;
        height: 16px;
        background: red;
        border-radius: 50%;
        position: absolute;
        transform: translate(0px)
    }
</style>


